<template>
  <div id="viewDiv"></div>
</template>

<script>
import { EsriNameSpace } from '../api/arcgis/esri-namespace'

export default {
  naem: 'qhh-water',
  data() {
    return {
      EsriNameSpace: new EsriNameSpace(),
    }
  },
  mounted() {
    this.EsriNameSpace.initNameSpace().then(() => {
      this.EsriNameSpace.urlUtils.addProxyRule({
        urlPrefix: 'http://218.94.6.92:6080/arcgis/rest/services',
        proxyUrl: 'http://localhost:8089' + '/DotNet/proxy.ashx',
      })

      this.initMap([118.797282, 32.034268], 2)
      // 创建水面
      const polygonWater = this.createLayer(
        this.EsriNameSpace,
        'http://mock-api.com/6KLe9xzk.mock/water',
        this.setSymbol('polygon')
      )
      // 创建流域线
      const lineWater = this.createLayer(
        this.EsriNameSpace,
        'http://mock-api.com/6KLe9xzk.mock/line',
        this.setSymbol('line')
      )
      // 创建站点
      const pointWater = this.createLayer(
        this.EsriNameSpace,
        'http://mock-api.com/6KLe9xzk.mock/pointwater',
        this.setSymbol('point')
      )

      this.ZGMap.add(polygonWater)
      this.ZGMap.add(lineWater)
      this.ZGMap.add(pointWater)
    })
  },
  methods: {
    // 初始化地图
    initMap(center, zoom) {
      console.log('初始化地图--ING')
      const layerNew = new this.EsriNameSpace.TileLayer({
        url:
          'http://218.94.6.92:6080/arcgis/rest/services/jspub_raster_L4_L20/MapServer',
        spatialReference: new this.EsriNameSpace.SpatialReference({
          wkid: 4490,
        }),
      })
      this.ZGMap = this.EsriNameSpace.Map({
        basemap: {
          baseLayers: [layerNew],
        },
      })
      this.ZGMapView = this.EsriNameSpace.MapView({
        map: this.ZGMap, // 地图类型样式
        container: 'viewDiv', // 地图容器
        center: center,
        zoom: zoom,
        popup: {
          dockEnabled: true,
          autoOpenEnabled: false,
          dockOptions: {
            buttonEnabled: false,
          },
        },
        constraints: {
          maxScale: 0,
          rotationEnabled: false, // 禁止旋转
        },
        navigation: {
          gamepad: {
            enabled: false,
          },
          browserTouchPanEnabled: false,
          momentumEnabled: false,
          mouseWheelZoomEnabled: true,
        },
      })
    }, // initMap End

    setSymbol(type) {
      switch (type) {
        case 'point':
          return {
            type: 'simple',
            symbol: {
              type: 'picture-marker',
              url:
                'https://static.arcgis.com/images/Symbols/Shapes/BlackStarLargeB.png',
              width: '64px',
              height: '64px',
            },
          }
          break
        case 'line':
          return {
            type: 'simple',
            symbol: {
              type: 'simple-line',
              color: '#B81918',
              width: '3px',
              style: 'short-dot',
            },
          }
          break
        case 'polygon':
          return {
            type: 'simple',
            symbol: {
              type: 'simple-fill',
              color: '#1186F4',
              style: 'solid',
              outline: {
                color: 'white',
                width: 0,
              },
            },
          }
          break
      }
    },
    createLayer(EsriNameSpace, url, renderer) {
      const layer = EsriNameSpace.GeoJSONLayer({
        visible: true,
        url: url,
        copyright: 'ZG',
        // title: 'hexagon',
        // id: 'hexagon',
        outFields: '*',
        opacity: 1,
        renderer: renderer,
      })
      return layer
    },
  },
}
</script>

<style scoped>
#viewDiv {
  width: 100vw;
  height: 100vh;
}
</style>
